<template>

  <div class="app-container flex flex-col">
    <!-- 查询区 -->
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="unitForm" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="计量单位名称：">
          <pb-input v-model="unitForm.packagingUnitName" placeholder="请输入计量单位名称"></pb-input>
        </el-form-item>
        <el-form-item label="单位类型：">
          <!-- <pb-check v-for="(item, index) in classList" :key="index" :checked="item.checked"
            @click="changeCheck(item, index)">
            {{ item.label }}
          </pb-check> -->

          <pb-check :list="classList" @change="changeCheck($event)"></pb-check>
        </el-form-item>
      </el-form>
    </searchCard>

    <!-- 表格区 -->
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <ContentOperation>
            <pb-button size="small" plain class="mr-6" @click="addUnitFn" v-hasPerm="'center:units:add'">
              +添加
            </pb-button>
            <pb-button size="small" plain v-hasPerm="'center:units:export'">导出</pb-button>
          </ContentOperation>
          <div class=" main-box ">
            <pb-table :column="unitColumn" :tableData="unitTableData" :bottomElement="['pb-page']">
              <template #isWeighed="{ row }">
                {{ row.isWeighed ? '计重' : '不计重' }}
              </template>
              <template #isSystemData="{ row }">
                {{ row.isSystemData ? '内置' : '新增' }}
              </template>
              <template #enableState="{ row }">
                <el-switch v-model="row.enableState" :active-value="1" :inactive-value="0" @click="changeState(row)" />
              </template>
              <template #operate="{ row }">
                <pb-button text size="small" @click="setUnitFn(row)" v-if="!row.isSystemData"
                  v-hasPerm="'center:units:edit'">编辑</pb-button>
              </template>
            </pb-table>
            <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
              @onChange="onPagesChange" :total="pages.total"></pb-pagination>
          </div>
        </div>

      </pb-card>
    </div>

    <addModifPop ref="addPopRef" @refresh="searchFn"></addModifPop>

  </div>
</template>

<script setup lang="ts">
import addModifPop from './components/addModifPop.vue';
import { getUnitsList, setUnitState } from '@/api/Units'
import { createMessage } from "@/Public-UIlibrary/pb-message/method";

const unitColumn = reactive([
  {
    key: "packagingUnitName",
    name: "计量单位名称",
  },
  {
    slot: "isWeighed",
    name: "计量单位类型",
  },
  {
    slot: "isSystemData",
    name: "来源",
  },
  {
    slot: 'enableState',
    name: "启用状态",
    fixed: 'right',
    width: 40,
    align: 'right',
  },
  {
    slot: "operate",
    name: "操作",
    fixed: 'right',
    width: 30,
    align: 'right',
  },
])

const unitTableData = ref([])

const classList = ref([
  { label: '全部', val: null, checked: true },
  { label: '计重', val: 1, checked: false },
  { label: '不计重', val: 0, checked: false },
])

const changeCheck = (event) => {
  unitForm.value.isWeighed = event.val
  getUnitsListApi()
}

const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 15,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  getUnitsListApi()
};


const formOrigin = () => ({
  packagingUnitName: null,
  isWeighed: null,
})
const unitForm = ref(formOrigin())
const searchFn = () => {
  pages.value.currentPage = 1
  getUnitsListApi()
};

const resetFn = () => {
  pages.value.currentPage = 1;
  unitForm.value = formOrigin();
  classList.value.map((el, idx) => {
    el.checked = false
    if (idx == 0) el.checked = true
  })
  getUnitsListApi()
};

const addPopRef = ref(null)
const addUnitFn = () => {
  addPopRef.value.showFn()
}

const setUnitFn = (row) => {
  addPopRef.value.showFn(JSON.parse(JSON.stringify(row)))
}


const getUnitsListApi = () => {
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value }
    getUnitsList({
      currentPage, pageSize,
      ...unitForm.value
    }).then(res => {
      if (res.code == 2000) {
        unitTableData.value = res.data.records
        pages.value.total = res.data.total
      }
    })
  })
}

// 切换状态
const changeState = (row) => {
  return new Promise<void>((resolve, reject) => {
    setUnitState({ skuPackagingUnitId: row.skuPackagingUnitId }).then(res => {
      if (res.code == 2000) {
        createMessage({
          message: '操作成功'
        })
      }
      getUnitsListApi()
    })
  })
}

onMounted(() => {
  getUnitsListApi()
})
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-box {
  padding: 16px;
  box-sizing: border-box;
}
</style>